<template>
  <div id="refund-list">
    <div class="search-box">
      <Row type="flex">
        <Row type="flex" justify="start" class="search-item-left">
          <Col class="search-item">
          <span class="search-label">正向订单编号:</span>
          <Input v-model="searchObj.orderCode" @on-keyup='filterSpace' placeholder="请输入">
          <!-- <Icon type="ios-search" slot="suffix"  @click="doSearch"/> -->
          </Input>
          </Col>
          <Col class="search-item">
          <span class="search-label">订单状态:</span>
          <Select v-model="searchObj.orderStatus" @on-change="doSearch">
            <Option v-for="item in orderStatus" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
          </Col>
          <Col class="search-item">
          <span class="search-label">门店名称:</span>
          <Select v-model="searchObj.shopId" :max-tag-count="1" :max-tag-placeholder="maxTagPlaceholder" filterable multiple class="select-shop-item" @on-change="doSearch">
            <Option v-for="item in shopList" :value="item.shopId" :key="item.shopId">{{ item.shopName }}</Option>
          </Select>
          </Input>
          </Col>
          <Col class="search-item">
          <Button class="search-btn" type="primary" @click="doSearch(2)">查询</Button>
          </Col>
          <Col class="search-item">
          <Button class="search-btn" @click="resetBtn">重置</Button>
          </Col>
        </Row>
        <Row type="flex" justify="end" class="search-item-right">
          <Col class="search-item">
          <Button v-if="exampleShow" @click="exampleOpen">收起筛选
            <Icon type="ios-arrow-down" />
          </Button>
          <Button v-else @click="exampleOpen">更多筛选
            <Icon type="ios-arrow-up" />
          </Button>
          </Col>
        </Row>
      </Row>
      <div class="search-example" v-show="exampleShow">
        <Row type="flex">
          <Col class="search-item">
          <span class="search-label">顾客姓名:</span>
          <Input v-model="searchObj.customerName" @on-keyup='filterSpace' placeholder="请输入">
          <!-- <Icon type="ios-search" slot="suffix"  @click="doSearch"/> -->
          </Input>
          </Col>
          <Col class="search-item">
          <span class="search-label">支付方式:</span>
          <Select v-model="searchObj.payMethod" @on-change="doSearch">
            <Option v-for="item in payMethod" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
          </Col>
          <Col class="search-item">
          <span class="search-label">退款类型:</span>
          <Select v-model="searchObj.refundType" @on-change="doSearch">
            <Option v-for="item in refundType" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
          </Col>
          <Col class="search-item">
          <span class="search-label search-label-w4">退款发起时间:</span>
          <DatePicker format="yyyy-MM-dd HH:mm:ss" ref="creationTime" :editable="false" v-model="dateTimes" @on-change="selectLaunchTime" :options="startTimeOption" placement="bottom" type="datetimerange">
          </DatePicker>
          </Col>
          <!-- <Col class="search-item">
          <span class="search-label">退款完成时间:</span>
          <DatePicker format="yyyy-MM-dd HH:mm:ss" ref="finishedTime" :editable="false" v-model="endTimes" @on-change="selectCompleteTime" :options="endTimeOption" placement="bottom" type="datetimerange">
          </DatePicker>
          </Col> -->
        </Row>
      </div>
    </div>
    <Table :loading="loading" :height="this.tableHeight" ref="selection" :columns="columns" :data="orderList.orderListData" stripe class="table-list">
      <!-- 支付方式 -->
      <template slot-scope="{ row }" slot="payCode">
        <span>{{ row.payCode==="ALIPAY"?"支付宝支付":row.payCode==="WEIXIN"?"微信支付":row.payCode==="CASH"?"现金支付":row.payCode==="UNION"?"银联支付":row.payCode==="TRANSFER_TO_PUBLIC_ACCOUNT"?"对公转账":row.payCode==="INTEGRAL"?"积分":row.payCode==="TICKET"?"彩票":row.payCode==="CURRENCY"?"游戏币":"" }}</span>
      </template>
      <!-- 退款类型 -->
      <template slot-scope="{ row }" slot="refundType">
        <span>{{ row.refundType==="0"?"仅退款":row.refundType==="1"?"退货退款":"" }}</span>
      </template>
      <!-- 订单状态 -->
      <!-- <template slot-scope="{ row }" slot="orderStatus">
        <span>{{ row.orderStatus==="0"?"退款失败":row.orderStatus==="1"?"退款成功":"" }}</span>
      </template> -->
      <template slot-scope="{ row }" slot="orderStatus">
        <!-- <span>{{ row.orderStatus==="0"?"未退款":row.orderStatus==="1"?"退款成功": row.orderStatus==="2"?"退款中":row.orderStatus==="3"?"退款失败":row.orderStatus==="4"?"异常":row.orderStatus==="5"?"部分退款":''}}</span> -->
        <span>{{ row.orderStatus==="1"?"退款成功": row.orderStatus==="2"?"退款中":''}}</span>
      </template>
    </Table>
    <div class="page-box" style="margin-top: 20px">
      <Page :total="orderList.orderListTotal" :current.sync="searchObj.pageIndex" :page-size="searchObj.pageSize" @on-change="handlePage" @on-page-size-change="handlePageSize" show-sizer show-total />
    </div>
  </div>
</template>
<script>
import { refundOrderQuery } from '@/api/order/index'
import { getShopList } from '@/api/system/store'
import { formatDate } from '@/libs/tools'
export default {
  name: 'order_refund_list',
  data () {
    return {
      exampleShow: true,
      loading: true,
      tableHeight: 0,
      // 订单状态
      orderStatus: [
        { value: -1, label: '全部' },
        // { value: 2, label: '退款中' },
        // { value: 1, label: '退款成功' },
        // { value: 0, label: '退款失败' }
        // { value: 4, label: '异常' },
        // { value: 0, label: '未退款' }
        { value: 2, label: '退款中' },
        { value: 1, label: '退款成功' }
      ],
      // 支付方式
      payMethod: [
        { value: -1, label: '全部' },
        { value: 'ALIPAY', label: '支付宝支付' },
        { value: 'WEIXIN', label: '微信支付' },
        { value: 'CASH', label: '现金支付' },
        { value: 'UNION', label: '银联支付' },
        { value: 'TRANSFER_TO_PUBLIC_ACCOUNT', label: '对公转账' }
        // { value: 'INTEGRAL', label: '积分' },
        // { value: 'TICKET', label: '彩票' },
        // { value: 'CURRENCY', label: '游戏币' }
      ],
      // 退款类型
      refundType: [
        { value: -1, label: '全部' },
        { value: 0, label: '仅退款' },
        { value: 1, label: '退货退款' }
      ],
      // 表格列名称
      columns: [
        {
          title: '订单编号',
          key: 'refundOrderCode',
          fixed: 'left',
          minWidth: 260
        },
        { title: '正向订单编号', key: 'orderCode', minWidth: 200 },
        { title: '门店名称', key: 'shopName', minWidth: 200 },
        { title: '顾客姓名', key: 'customerName', minWidth: 150 },
        { title: '订单状态', slot: 'orderStatus', minWidth: 150 },
        // { title: '门店ID', key: 'shopId', minWidth: 300 },
        { title: '支付方式', slot: 'payCode', minWidth: 150 },
        { title: '退款类型', slot: 'refundType', minWidth: 150 },
        { title: '退款金额(元)', key: 'refundAmount', minWidth: 120 },
        { title: '退还积分数量', key: 'refundPoint', minWidth: 120 },
        { title: '退款操作人姓名', key: 'carshierName', minWidth: 150 },
        // { title: '退还优惠券ID', key: 'refundCoupon', minWidth: 300 },
        // { title: '退款彩票数量', key: 'refundTicket', minWidth: 120 },
        { title: '退款发起时间', key: 'createTime', minWidth: 200 },
        { title: '退款完成时间', key: 'finishTime', minWidth: 200 }
        // { title: '备注', key: 'Remarks', minWidth: 150 }
      ],
      dateTimes: [
        formatDate(
          new Date(new Date().getTime() - 86400000 * 7),
          'yyyy-MM-dd hh:mm:ss'
        ),
        formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
      ],
      endTimes: [],
      customerName: '',
      createTimeBegin: '',
      createTimeEnd: '',
      finishTimeBegin: '',
      finishTimeEnd: '',
      orderCode: '',
      searchObj: {
        orderCode: '',
        orderStatus: -1,
        shopId: [],
        customerName: '',
        payMethod: -1,
        refundType: -1,
        createTimeBegin: formatDate(
          new Date(new Date().getTime() - 86400000 * 7),
          'yyyy-MM-dd hh:mm:ss'
        ),
        createTimeEnd: formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss'),
        finishTimeBegin: '',
        finishTimeEnd: '',
        pageIndex: 1,
        pageSize: 10
      },
      orderList: {
        orderListData: [],
        orderListTotal: 0
      },
      shopList: [],
      startTimeOption: {},
      endTimeOption: {}
    }
  },
  created () {
    this.createTimeBegin = formatDate(new Date(new Date().getTime() - 86400000 * 7), 'yyyy-MM-dd hh:mm:ss')
    this.createTimeEnd = formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
    this.getShopList()
  },
  methods: {
    maxTagPlaceholder (num) {
      return '...'
    },
    filterSpace () {
      this.searchObj.customerName = this.searchObj.customerName.replace(
        /\s+/g,
        ''
      )
    },
    // 查询门店名称
    getShopList () {
      this.loading = true
      this.tableHeight = 0
      getShopList({
        permissionCode: 'moms:order:refundview', // 查看普通退款订单
        merchantId: this.$store.state.user.merchantId, // 商户id
        offset: 0,
        limit: 9999
      })
        .then(res => {
          if (res.data.status === 200) {
            if (res.data.totalCount > 0) {
              this.shopList = res.data.data
              // let shopId = res.data.data[0].shopId
              // this.searchObj.shopId.push(shopId)
              this.getOrderPage()
            } else {
              this.loading = false
              this.orderList = {
                orderListData: [],
                orderListTotal: 0
              }
            }
          } else {
            this.loading = false
            this.$Message.error(`${res.data.error}`)
          }
        })
        .catch(error => {
          this.$Message.error(`${this.showError(error)}`)
        })
    },

    // 分页操作
    handlePage (val) {
      this.searchObj.pageIndex = val
      this.getOrderPage()
    },
    handlePageSize (val) {
      this.searchObj.pageSize = val
      this.searchObj.pageIndex = 1
      this.getOrderPage()
    },
    // 查询
    doSearch (type = 1) {
      // if (this.searchObj.shopId.length > 0) {
      if (type === 2) {
        this.customerName = this.searchObj.customerName
        this.createTimeBegin = this.searchObj.createTimeBegin
        this.createTimeEnd = this.searchObj.createTimeEnd
        this.finishTimeBegin = this.searchObj.finishTimeBegin
        this.finishTimeEnd = this.searchObj.finishTimeEnd
        this.orderCode = this.searchObj.orderCode
      }
      this.searchObj.pageIndex = 1
      this.searchObj.pageSize = 10
      this.getOrderPage()
      // } else {
      //   this.tableHeight = 0
      //   this.orderList = {
      //     orderListData: [],
      //     orderListTotal: 0
      //   }
      //   this.$Message.error(`请选择门店！`)
      // }
    },

    // 更多筛选
    exampleOpen () {
      this.exampleShow = !this.exampleShow
    },

    // 订单分页查询
    getOrderPage () {
      this.tableHeight = 0
      // if (this.searchObj.shopId.length > 0) {
      this.loading = true
      refundOrderQuery({
        orderCode: this.orderCode,
        merchantId: this.$store.state.user.merchantId, // 商户id
        orderStatus:
          this.searchObj.orderStatus === -1 ? '' : this.searchObj.orderStatus, // 订单状态
        shopId:
          this.searchObj.shopId.length > 1
            ? this.searchObj.shopId.join(',')
            : this.searchObj.shopId.join(''), // 门店ID
        // customerName: this.searchObj.customerName, // 顾客姓名
        customerName: this.customerName,
        payCode:
          this.searchObj.payMethod === -1 ? '' : this.searchObj.payMethod, // 支付方式
        refundType:
          this.searchObj.refundType === -1 ? '' : this.searchObj.refundType, // 退款类型
        // createTimeBegin: this.searchObj.createTimeBegin, // 退款发起时间开始
        // createTimeEnd: this.searchObj.createTimeEnd, // 退款发起时间结束
        // finishTimeBegin: this.searchObj.finishTimeBegin, // 退款完成时间开始
        // finishTimeEnd: this.searchObj.finishTimeEnd, // 退款完成时间结束
        createTimeBegin: this.createTimeBegin, // 退款发起时间开始
        createTimeEnd: this.createTimeEnd, // 退款发起时间结束
        // finishTimeBegin: this.finishTimeBegin, // 退款完成时间开始
        // finishTimeEnd: this.finishTimeEnd, // 退款完成时间结束
        offset: (this.searchObj.pageIndex - 1) * this.searchObj.pageSize, // 分页OFFSET
        limit: this.searchObj.pageSize // 分页大小,
      })
        .then(res => {
          this.loading = false
          if (res.data.status === 200) {
            this.orderList = {
              orderListData: res.data.data,
              orderListTotal: res.data.totalCount
            }
            if (res.data.data && res.data.data.length >= 10) {
              this.tableHeight = 537
            }
          } else {
            this.orderList = {
              orderListData: [],
              orderListTotal: 0
            }
            this.$Message.error(`${res.data.error}`)
          }
        })
        .catch(error => {
          this.$Message.error(`${this.showError(error)}`)
          this.loading = false
        })
      // }
    },

    // 切换退款发起时间
    selectLaunchTime (e) {
      this.searchObj.createTimeBegin = e[0]
      this.searchObj.createTimeEnd = e[1]
      this.endTimeOption = {
        disabledDate (endTime) {
          return endTime < new Date(e[0])
        }
      }
    },

    // 切换退款完成时间
    selectCompleteTime (e) {
      this.searchObj.finishTimeBegin = e[0]
      this.searchObj.finishTimeEnd = e[1]
      this.startTimeOption = {
        disabledDate (startTime) {
          return startTime > new Date(e[1])
        }
      }
    },

    // 重置
    resetBtn () {
      this.orderCode = ''
      this.dateTimes = [
        formatDate(
          new Date(new Date().getTime() - 86400000 * 7),
          'yyyy-MM-dd hh:mm:ss'
        ),
        formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
      ]
      this.endTimes = []
      this.searchObj.orderCode = ''
      this.searchObj.orderStatus = -1
      this.searchObj.shopId = []
      this.searchObj.customerName = ''
      this.searchObj.payMethod = -1
      this.searchObj.refundType = -1
      this.searchObj.createTimeBegin = formatDate(
        new Date(new Date().getTime() - 86400000 * 7),
        'yyyy-MM-dd hh:mm:ss'
      )
      this.searchObj.createTimeEnd = formatDate(
        new Date(),
        'yyyy-MM-dd hh:mm:ss'
      )
      this.customerName = ''
      this.createTimeBegin = formatDate(new Date(new Date().getTime() - 86400000 * 7), 'yyyy-MM-dd hh:mm:ss')
      this.createTimeEnd = formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
      this.searchObj.finishTimeBegin = ''
      this.searchObj.finishTimeEnd = ''
      this.$refs.creationTime.handleClear()
      // this.$refs.finishedTime.handleClear()
      this.searchObj.pageIndex = 1
      this.searchObj.pageSize = 10
      // let shopId = this.shopList[0].shopId
      // this.searchObj.shopId.push(shopId)
      this.loading = true
      this.doSearch()
    },

    showError (error) {
      return error.response && error.response.data.error
        ? error.response.data.error
        : error.data && error.data.error ? error.data.error : ''
    }
  },
  computed: {}
}
</script>

<style lang='less'>
#refund-list {
  .search-box {
    .search-item {
      .ivu-date-picker {
        width: 280px;
        .ivu-date-picker-editor {
          width: 280px;
        }
      }
    }
  }
  .ivu-table-tip {
    span {
      position: absolute;
      width: 100px;
      left: 50%;
      margin-left: -50px;
    }
  }

  .select-shop-item {
    height: 35px;
    width: 210px;
    .ivu-select-selection {
      height: 35px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .ivu-tag {
      max-width: 100px;
    }
  }
  .select-shop-item .ivu-select-dropdown {
    width: 300px;
  }
  .select-shop-item .ivu-select-item {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .select-shop-item .ivu-select-input {
    width: 40px !important;
  }
}
</style>
